:root {
    --font-color-h1: #333;
    --font-color-h2: #444;
    --font-color-h3: #555;
    --font-color-h4-h6: #666;
    --font-color-p: #222;
    --link-color: #007bff;
    --blockquote-border: #ccc;
    --blockquote-bg: #f9f9f9;
    --blockquote-color: #666;
    --code-bg: #f8f8f8;
    --code-color: #d63384;
    --pre-bg: #f8f8f8;
    --pre-color: #d63384;
    --code-block-bg: #f5f5f5;
    --code-block-border: #e0e0e0;
}

.text-white, .dark {
    --font-color-h1: #ccc;
    --font-color-h2: #bbb;
    --font-color-h3: #aaa;
    --font-color-h4-h6: #999;
    --font-color-p: #ddd;
    --link-color: #66bfff;
    --blockquote-border: #888;
    --blockquote-bg: #333;
    --blockquote-color: #ccc;
    --code-bg: #444;
    --code-color: #ff6fcf;
    --pre-bg: #444;
    --pre-color: #ff6fcf;
    --code-block-bg: #3b3b3b;
    --code-block-border: #555;
}

.f-rich-text-content h1 {
    font-size: 2em;
    font-weight: bold;
    color: var(--font-color-h1);
}

.f-rich-text-content h2 {
    font-size: 1.75em;
    font-weight: bold;
    color: var(--font-color-h2);
}

.f-rich-text-content h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--font-color-h3);
}

.f-rich-text-content h4,
.f-rich-text-content h5,
.f-rich-text-content h6 {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--font-color-h4-h6);
}

.f-rich-text-content p {
    line-height: 1.6;
    color: var(--font-color-p);
}

.f-rich-text-content a {
    color: var(--link-color);
    text-decoration: none;
}

.f-rich-text-content a:hover {
    text-decoration: underline;
}

.f-rich-text-content ul {
    padding-left: 40px;
    list-style-type: disc;
}

.f-rich-text-content ol {
    padding-left: 40px;
    list-style-type: decimal;
}

.f-rich-text-content li {}

.f-rich-text-content blockquote {
    padding: 0.5em 10px;
    border-left: 5px solid var(--blockquote-border);
    background: var(--blockquote-bg);
    color: var(--blockquote-color);
}

.f-rich-text-content code {
    font-family: monospace;
    background: var(--code-bg);
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--code-color);
}

.f-rich-text-content pre {
    font-family: monospace;
    background: var(--pre-bg);
    padding: 10px;
    border-radius: 4px;
    overflow: auto;
    color: var(--pre-color);
}

.f-rich-text-content .ql-align-left {
    text-align: left;
}

.f-rich-text-content .ql-align-center {
    text-align: center;
}

.f-rich-text-content .ql-align-right {
    text-align: right;
}

.f-rich-text-content .ql-align-justify {
    text-align: justify;
}

.f-rich-text-content .ql-indent-1 {
    padding-left: 3em;
}

.f-rich-text-content .ql-indent-2 {
    padding-left: 6em;
}

.f-rich-text-content .ql-indent-3 {
    padding-left: 9em;
}

.f-rich-text-content .ql-direction-ltr {
    direction: ltr;
}

.f-rich-text-content .ql-direction-rtl {
    direction: rtl;
}

.f-rich-text-content .ql-font-serif {
    font-family: serif;
}

.f-rich-text-content .ql-font-sans {
    font-family: sans-serif;
}

.f-rich-text-content .ql-font-monospace {
    font-family: monospace;
}

.f-rich-text-content .ql-bold {
    font-weight: bold;
}

.f-rich-text-content .ql-italic {
    font-style: italic;
}

.f-rich-text-content .ql-underline {
    text-decoration: underline;
}

.f-rich-text-content .ql-strike {
    text-decoration: line-through;
}

.f-rich-text-content .ql-list-ordered {
    list-style-type: decimal;
}

.f-rich-text-content .ql-list-bullet {
    list-style-type: disc;
}

.f-rich-text-content .ql-code-block {
    background-color: var(--code-block-bg);
    border-left: 4px solid var(--code-block-border);
    padding: 0.5em;
    font-family: monospace;
}

.f-rich-text-content .ql-script-sub {
    vertical-align: sub;
    font-size: smaller;
}

.f-rich-text-content .ql-script-super {
    vertical-align: super;
    font-size: smaller;
}